import React, { Component } from 'react'
import './index.css'
export default class Item extends Component {
  state={isHover:false}
  handleMouse=(flag)=>{
    return ()=>{
      this.setState({isHover:flag})
    }
  }
  //点击删除按钮将当前todo的id传给父组件list，list在通过函数调用将id传给App
  deletTodo=()=>{
    const {content,deletOne}=this.props
    deletOne(content.id)
  }
  //勾选时处理函数
  checkChange=(e)=>{
    const {target}=e
    const {content,changeAction}=this.props
    changeAction(content.id,target.checked)
  }
  render() {
    const {id,td,done}=this.props.content
    const {isHover}=this.state
    return (
      <div className='checxbox' onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}  style={{backgroundColor:isHover?'#ddd':'#f1f3f5'}}>
        <div>
           <input type="checkbox" checked={done} name="" id="" onChange={this.checkChange} />
           <span>{td}</span>
        </div>
        <button style={{display:isHover?'block':'none'}} onClick={()=>this.deletTodo(id)}>删除</button>
       
      </div>
    )
  }
}


